<template>
  <div class="footer">
      <div class="line-top"></div>
      <div class="container">
        <div class="row">
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">爱彼迎</li>
              <li>
                <router-link to="/list" class="footer-list-bottom">工作机会</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">新闻</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">政策</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">帮助</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">多元化与归属感</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">
                  <span>无障碍设施</span>
                  <span class="footer-new">New</span>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">发现</li>
              <li>
                <router-link to="/list" class="footer-list-bottom">信任与安全</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">旅行基金</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">爱彼迎公民</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">商务差旅</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">旅游指南</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">爱彼迎杂志</router-link>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">出租</li>
              <li>
                <router-link to="/list" class="footer-list-bottom">为什幺出租？</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">待客之道</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">房东义务</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">
                  <span>开展体验</span>
                  <span class="footer-new">New</span>
                </router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">Open Homes</router-link>
              </li>
            </ul>
          </div>
          <div class="col-sm-3">
            <ul>
              <li class="footer-list-top">
                <img src="../image/wChat.jpg" alt>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">条款</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">隐私政策</router-link>
              </li>
              <li>
                <router-link to="/list" class="footer-list-bottom">网站地图</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="line-bottom"></div>
        <div class="footer-bottom">
          <div class="footer-bottom-left">
            <img src="../image/footer-logo.jpg" alt>
          </div>
          <div class="footer-bottom-right">
            <p>
              京ICP备16017121号-3 京ICP证 160773号
              <img src="../image/police.png" alt>
              京公网安备 11010502032345号安彼迎网络（北京）有限公司
            </p>
            <p>© 2019 Airbnb, Inc. All rights reserved.</p>
          </div>
        </div>
      </div>
    </div>
</template>


<style lang="">
    .line-top {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin-bottom: 50px;
}
.line-bottom {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin-bottom: 30px;
}
.silie {
  border: 1px solid red;
}
li {
  list-style: none;
}
.footer-list-bottom {
  color: black;
  font-size: 14px;
  color: #767676 !important;
  font-weight: 800;
  line-height: 0.5;
}
.footer-list-top {
  font-size: 14px;
  color: rgb(72, 72, 72) !important;
  font-weight: 800;
  margin-bottom: 16px;
}
.footer-new {
  width: 25px;
  height: 16px;
  background-color: rgb(0, 106, 112) !important;
  color: white;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  padding: 0 5px;
  border-radius: 4px;
}
.footer-bottom {
  padding-bottom: 48px;
}
.footer-bottom-left,
.footer-bottom-right {
  display: inline-block;
}
.footer-bottom-left img {
  margin-top: -25px;
}
.footer-bottom-right p {
  padding: 0px;
  margin: 0px;
  font-size: 14px;
  line-height: 1.28571em !important;
  color: rgb(118, 118, 118) !important;
  font-weight: 600;
}
</style>